<template>
     <div>
    <div v-loading="loading">
      <!-- 视频详情页面 -->
      <!--内容 -->
      <div class="video-course-bg">
        <img src="../assets/imgs/九英.jpg" class="bg-filter" />
        <div class="bg-filter-after"></div>
        <div class="warp">
          <!-- 面包屑组件 -->
          <div class="breadcrumb default-border" style=" filter: blur(5px);">
            <el-breadcrumb separator-class="el-icon-arrow-right" class="ul">
              <el-breadcrumb-item class="li" >首页</el-breadcrumb-item>
              <el-breadcrumb-item class="li" >视频课程</el-breadcrumb-item>
              <el-breadcrumb-item class="li">初中数学必须掌握的有理数基础知识</el-breadcrumb-item>
            </el-breadcrumb>
          </div>
          <h1 style=" filter: blur(5px);">人教版九年级英语全册教学视频课程</h1>
          <div class="video-course-info">
            <div class="user-body">
              <img src="../assets/imgs/user-header.png" alt="" />
              <div class="user-name">
                <p>易学啦</p>
              </div>
            </div>
            <div class="video-course-classinfo" style=" filter: blur(15px);">
              <span>年级：初一 </span>
              <span>时长：22时10分</span>
              <span>学习人数：135064</span>
              <span>发布时间：2021-09-02</span>
            </div>
            <div class="share-course-info-icon">
              <i class="iconfont icon-shoucang"></i>
              <i class="iconfont icon-qq"></i>
              <i class="iconfont icon-wb"></i>
            </div>
          </div>
        </div>
      </div>
      <div class="warp main-body">
        <div class="video-course-title">
          <div class="course-tab">
            <li class="dis-block active">课程章节</li>
            <li class="dis-block">用户评论</li>
          </div>
          <div class="course-download">
            <div>
              <span class="download-btn">视频打包下载</span>
              <span class="download-btn">视频单个下载</span>
            </div>
          </div>
        </div>
        <div class="video-course-body">
          <!-- 左侧列表 -->
          <div class="video-course-left">
            <!-- 内容介绍区域 -->
            <div class="video-info-content">
              <div class="video-course-intro">
                <span>简介：</span>
                <div>
                  <p style=" filter: blur(5px);">
                    人教部编版九年级英语全册辅导教学视频课程讲解，主要为人教版新目标初三英语全册的基础知识点以及英语语法归纳讲解，本套课程可在线观看，也可以使用APP下载反复看，教学课程不断更新中。
                  </p>
                </div>
              </div>

              <!-- 视频列表 -->
              <div style="filter: blur(15px);">
                <div class="video-course-list">
                  <!-- 视频列表标题 -->
                  <p>Unit 1 How can we become good learners?</p>

                  <div class="video-list-item">
                    <div class="list-box">
                      <div class="list-box-title">
                        <i class="iconfont icon-bofang"></i>
                        <span>Unit 1 课标词汇解析(16分)</span>
                      </div>
                      <span>免费</span>
                    </div>
                  </div>

                  <div class="video-list-item">
                    <div class="list-box">
                      <div class="list-box-title">
                        <i class="iconfont icon-bofang"></i>
                        <span>Unit 1 课标词汇解析(16分)</span>
                      </div>
                      <span>免费</span>
                    </div>
                  </div>

                  <div class="video-list-item">
                    <div class="list-box">
                      <div class="list-box-title">
                        <i class="iconfont icon-bofang"></i>
                        <span>Unit 1 课标词汇解析(16分)</span>
                      </div>
                      <span class="VIP">VIP</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>

       
          </div>

          <!-- 右侧列表 -->
          <div class="video-course-right" style=" filter: blur(5px);">
            <div class="video-course-learn">
              <div class="dis-block">开始学习</div>
              <h5>课程介绍</h5>
              <p>
                人教部编版九年级英语全册辅导教学视频课程讲解，主要为人教版新目标初三英语全册的基础知识点以及英语语法归纳讲解，本套课程可在线观看，也可以使用APP下载反复看，教学课程不断更新中。
              </p>
              <h5>课程信息</h5>
              <p>本套课程共节课，课程于2021-09-02发布,总时长约22时10分</p>
            </div>
            <div class="video-course-recommend">
              <div class="title">
                <h4>推荐课程</h4>
              </div>
              <ul class="video-course-recommend-ul">
                <div class="jd-ad">
                  <div class="ads-info">
                    <div class="_1d006n6ggrg"></div>
                  </div>
                </div>
                <a href="" class="li dis-block">
                  <img
                    src="../assets/imgs/几何.jpg"
                    alt="高中数学解析几何专题教学视频"
                  />
                  <div style="width: 183px">
                    <p class="userlist-ul-title">高中数学解析几何专题教学视频</p>
                    <p class="userlist-ul-i">
                      <span><i class="iconfont icon-time"></i> 16时39分</span>
                      <span><i class="iconfont icon-view"></i> 61663人学习</span>
                    </p>
                  </div>
                </a>
                <a href="" class="li dis-block">
                  <img
                    src="../assets/imgs/几何.jpg"
                    alt="高中数学解析几何专题教学视频"
                  />
                  <div style="width: 183px">
                    <p class="userlist-ul-title">高中数学解析几何专题教学视频</p>
                    <p class="userlist-ul-i">
                      <span><i class="iconfont icon-time"></i> 16时39分</span>
                      <span><i class="iconfont icon-view"></i> 61663人学习</span>
                    </p>
                  </div>
                </a>
              </ul>
            </div>
            <div class="video-course-user mt-20">
              <div class="title">
                <h4>近期学习该课程的同学</h4>
              </div>
              <ul class="video-course-user-ul"></ul>
            </div>
          </div>
        </div>
      </div>
      <!--内容 END-->
    </div>
  </div>
</template>

<script>
    export default {
        data() {
            return {
                loading:true,
            };
        },
    }
</script>
<style lang="scss" scoped>
// 修改组件样式

.breadcrumb ::v-deep .el-breadcrumb__inner {
  color: #a3b9bb;
  cursor: pointer;
}

.breadcrumb ::v-deep .el-breadcrumb__inner:hover {
  color: #a3b9bb;
}

.breadcrumb ::v-deep .el-breadcrumb__inner.is-link:hover {
  color: #48c5a3;
  cursor: pointer;
}

.breadcrumb ::v-deep .is-link {
  color: #48c5a3;
  cursor: pointer;
}

.video-course-bg {
  width: 100%;
  overflow: hidden;
  position: relative;
  padding-bottom: 60px;
  .course-bg-nav {
    font-size: 14px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.5);
    padding: 20px 0 0;
    font-size: 14px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.5);
    padding: 20px 0 0;
    ul {
      li {
        a {
          color: rgba(255, 255, 255, 0.5);
        }
      }
    }
  }
  h1 {
    font-size: 30px;
    font-weight: 600;
    color: #fff;
    letter-spacing: 1px;
    padding: 12px 0;
  }
  .video-course-info {
    display: flex;
    align-items: center;
    .video-course-classinfo {
      font-size: 12px;
      font-weight: 400;
      color: #fff;
      span {
        margin-left: 40px;
        margin-right: 40px;
      }
    }
  }
}
.bg-filter,
.bg-filter-after {
  width: 100%;
  height: 100%;
  position: absolute;
  width: 100%;
  height: 100%;
  position: absolute;
}
.bg-filter {
  filter: blur(15px);
  z-index: -2;
}
.bg-filter-after {
  z-index: -1;
  background: rgba(0, 0, 0, 0.50196);
}
.breadcrumb {
  margin-top: 10px;
  padding: 15px 10px;
}
.user-body {
  display: inline-flex;
  color: #fff;
  img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-right: 12px;
  }
  .user-name {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    max-width: 150px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    p {
      font-size: 16px;
      font-weight: 600;
    }
  }
}
.share-course-info-icon {
  margin-left: auto;
  i {
    cursor: pointer;
    font-size: 30px;
    margin-left: 22px;
    color: #48c5a3;
  }
}
.main-body {
  margin-top: -50px;
  position: relative;
}
.video-course-title {
  height: 70px;
  background: #fff;
  box-shadow: 0 5px 8px 0 rgb(0 0 0 / 4%);
  border-radius: 6px;
  display: flex;
  justify-content: space-between;
  .course-tab {
    display: flex;
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin-left: 30px;
    li {
      margin-right: 50px;
      line-height: 70px;
      cursor: pointer;
    }
  }
  .course-download {
    display: flex;
    margin-right: 17px;
    align-items: center;
  }
}
.video-course-title .course-tab .active,
.video-course-title .course-tab li:hover {
  color: #48c5a3;
  border-bottom: 2px solid #48c5a3;
}
.download-btn {
  font-size: 14px;
  font-weight: 500;
  color: #f76447;
  padding: 5px 12px;
  background: rgba(247, 100, 71, 0.21961);
  border-radius: 4px;
  height: 20px;
  margin-left: 20px;
  cursor: pointer;
}
.el-dialog__wrapper {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
  margin: 0;
}
.el-dialog {
  position: relative;
  margin: 0 auto 50px;
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  box-sizing: border-box;
  width: 50%;
}
.el-dialog__header {
  padding: 20px 20px 10px;
}
.el-dialog__body {
  padding: 30px 20px;
  color: #606266;
  font-size: 14px;
  word-break: break-all;
}
.video-course-body {
  margin: 20px 0;
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  .video-course-left {
    width: 850px;
  }
  .video-course-right {
    width: 320px;
    .video-course-learn {
      background: #fff;
      box-shadow: 0 0 24px 0 rgb(0 0 0 / 6%);
      border-radius: 6px;
      padding: 24px 17px;
      .dis-block {
        cursor: pointer;
        font-size: 18px;
        font-weight: 550;
        color: #fff;
        height: 44px;
        background: #48c5a3;
        border-radius: 22px;
        text-align: center;
        line-height: 44px;
      }
      h5 {
        font-size: 16px;
        font-weight: 600;
        color: #333;
        margin: 30px 0 11px;
      }
      p {
        line-height: 26px;
        font-size: 14px;
        font-weight: 400;
        color: #666;
      }
    }
    .video-course-recommend {
      margin-top: 20px;
      background: #fff;
      border-radius: 6px;
      padding: 0 17px;
    }
    .title {
      padding: 15px 0;
      display: flex;
      justify-content: space-between;
    }
    h4 {
      font-size: 18px;
      font-weight: 600;
      color: #333;
      line-height: 25px;
    }
  }
}
.video-course-left {
  .video-course-intro {
    padding: 19px 30px;
    background: #fff;
    box-shadow: 0 0 24px 0 rgb(0 0 0 / 6%);
    border-radius: 6px;
    color: #333;
    line-height: 26px;
    span {
      font-weight: 600;
    }
  }
}
.video-course-list {
  background: #fff;
  box-shadow: 0 0 24px 0 rgb(0 0 0 / 6%);
  border-radius: 6px;
  padding: 30px 20px;
  margin-top: 10px;
  p {
    &:first-of-type {
      font-size: 16px;
      font-weight: 600;
      color: #333;
      margin-bottom: 26px;
    }
  }
  .video-list-item {
    display: flex;
    align-items: center;
    height: 28px;
    position: relative;
    padding: 10px 0;
    color: #666;
    box-shadow: 0px 0px 5px 0px #ccc;
    border-radius: 9px;
    margin-bottom: 10px;
    overflow: hidden;
    &:hover {
      background: #48c5a415;
      color: #48c5a3;
      cursor: pointer;
    }
    .list-box {
      display: flex;
      justify-content: space-between;
      align-items: center;
      line-height: 28px;
      flex: 1;
      z-index: 6;
      padding: 10px;
      background: #fff;
      .VIP {
        font-size: 20px;
        color: #d7ba7d;
      }
    }
    a {
      display: flex;
      align-items: center;
    }
    i {
      font-size: 24px;
      margin-right: 16px;
    }
    .start-learn-btn {
      margin-left: auto;
      background: #48c5a3;
      border-radius: 4px;
      padding: 4px 6px;
      color: #fff;
      position: absolute;
      right: 10px;
      z-index: 5;
    }
  }
}
/* 右侧列表 */
.video-course-recommend {
  .video-course-recommend-ul {
    .li {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 17px 0;
      border-top: 1px solid #eee;
      img {
        border-radius: 4px;
        width: 90px;
        height: 61px;
      }
      span {
        font-weight: 400;
        line-height: 20px;
        display: inline-block;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        width: 110px;
        font-size: 12px;
      }
    }
    .userlist-ul-i {
      display: flex;
      justify-content: space-between;
      margin-top: 8px;
    }
  }
}
.video-comment {
  background: #fff;
  box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.06);
  border-radius: 6px;
}
.comment-box {
  .comment-form {
    display: flex;
    button {
      margin-left: 20px;
    }
  }
  .comment-item {
    padding: 10px 0;
  }
  .userinfo {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    .user-header {
      border-radius: 50%;
      width: 40px;
      height: 40px;
      margin-right: 20px;
    }
    .user-name {
      p {
        font-size: 16px;
        font-weight: 600;
        color: #333;
      }
      span {
        font-size: 12px;
        font-weight: 400;
        color: #aaa;
      }
    }
  }
  .comment-content {
    margin: 13px 0 0 50px;
  }
  .comment-other-op {
    display: flex;
    margin: 10px 0;
    justify-content: flex-end;
    div {
      margin: 0 10px;
      color: #838ea3;
      display: flex;
      align-items: center;
      i {
        margin-right: 3px;
      }
    }
  }
}
.el-input {
  position: relative;
  font-size: 14px;
  display: inline-block;
  width: 100%;
}
.el-input__inner {
  background-color: #fff;
  background-image: none;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  box-sizing: border-box;
  color: #606266;
  display: inline-block;
  font-size: inherit;
  height: 40px;
  line-height: 40px;
  outline: 0;
  padding: 0 15px;
  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  width: 100%;
}
.comment-box .child-item,
.comment-box .main-item {
  padding: 15px 0;
  border-bottom: 1px solid #eee;
}
.flex,
.flex-bw {
  display: flex;
}
</style>